<template>
	<view class="container">
		<!-- F1: 顶部搜索栏 -->
		<view class="f1">
			<!-- 左侧：汉堡包按钮 -->
			<uni-icons @click="$refs.drawerMenu.open()" type="bars" color="#fff" size="60rpx"/>
			<!-- 中间：输入框组 -->
			<view class="input-group">
				<input disabled @click="goToSearch" type="text" placeholder="商品搜索"/>
				<image src="../../static/img/logo-s.png" mode="widthFix"/>
				<uni-icons class="search" type="search" size="45rpx" color="#666"/>
			</view>
			<!-- 右侧：登录按钮 -->
			<navigator url="/pages/userCenter/userCenter" open-type="switchTab">登录</navigator>
		</view>
		<!-- F2: 轮播广告 -->
		<!-- F3: 首页推荐 -->
		<!-- F4: 最新上架 -->
		<!-- F5: 热销单品 -->
		<!-- F6: 页尾 -->
		<xzFooter></xzFooter>
		<xzFooter></xzFooter>
		<xzFooter></xzFooter>
		<xzFooter></xzFooter>
		<!-- F7: 返回顶部 -->
		<xzGoTop></xzGoTop>
		<!-- F8: 汉堡包按钮弹出的抽屉(菜单) -->
		<uni-drawer ref="drawerMenu">
			<view style="padding:30rpx;">
				<!-- link：①指定跳转方式 ②添加向右的箭头 ③增加点击反馈(背景色变深) -->
				<uni-list>
					<uni-list-item title="登录" link="switchTab" to="/pages/userCenter/userCenter"/>
					<uni-list-item title="注册" link="switchTab" to="/pages/userCenter/userCenter"/>
					<uni-list-item title="品牌馆" link="switchTab" to="/pages/brands/brands"/>
					<uni-list-item title="商品分类" link="switchTab" to="/pages/category/category"/>
					<uni-list-item title="商品搜索" link to="/pages/search/search"/>
					<uni-list-item title="在线客服" link to="/pages/chatroom/chatroom"/>
				</uni-list>
				<button @click="$refs.drawerMenu.close()" type="primary" size="mini">关闭</button>
			</view>
		</uni-drawer>
	</view>
</template>							

<script>
	export default {
		async onLoad(){
			console.log('------首页挂载完成-------')
			/**********向服务器端数据API发起GET异步请求***********/
			/*
			let url = 'https://web.codeboy.com/xuezi/data/product/index.php'
			//let x = await uni.request({ url })
			//console.log(x)   //[错误对象,  响应消息]
			let [err, res] = await uni.request({ url })
			//如果异步请求失败，err是一个对象；否则是一个null
			console.log(res.data)  //响应消息主体    
			*/
		   
		   /**********向服务器端数据API发起POST异步请求***********/
		   //给用户一些友好的提示：加载中，请稍候...
		   uni.showLoading({
		   	title: '数据加载中...'
		   })
		   let t1 = Date.now()
		   //////////////////////////////////////
		   let url = 'https://web.codeboy.com/xuezi/data/user/login.php'
		   let [err, res] = await uni.request({ 
				 url,
				 method: 'POST',					//请求方法，默认值是GET
				 header: {'Content-Type': 'application/x-www-form-urlencoded'},
				 //data: 'uname=yaya&upwd=123456'		//data就是请求消息的主体
				 data: {uname:'yaya', upwd:'123456'}    //此处的对象会被uni.request自动修改为Content-Type要求的数据格式
		   })
		   console.log(res)	
		   let t2 = Date.now()
		   //隐藏“加载中”提示框
		   uni.hideLoading()
		},
		methods: {
			goToSearch(){
				//导航跳转/保留跳转到搜索页
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	//渐变的背景色 —— 不是背景色而是背景图片
	background-image: linear-gradient(180deg, $uni-color-primary 100rpx,  $uni-bg-color 500rpx);
}
.f1 {
	padding-top: $uni-spacing-col-lg * 3;
	padding-bottom: $uni-spacing-col-base;
	padding-left: $uni-spacing-row-lg;
	padding-right: $uni-spacing-row-lg;
	//弹性容器主轴方向：横向
	flex-direction: row;
	//子元素在交叉轴上对齐方式：居中
	align-items: center;
	.input-group {
		//弹性子元素宽度增长权重：1
		flex: 1;
		margin: 0  $uni-spacing-row-base;
		position: relative; //为图标提供定位参照物
		input {
			background-color: $uni-text-color-inverse;
			//line-height: 100rpx  !important;  //此处无效
			height: $uni-font-size-base * 2.4;
			border-radius: $uni-font-size-base * 1.2;
			text-align: center;
		}
		image {
			width: $uni-font-size-base * 1.4;
			position: absolute;
			left: $uni-spacing-row-lg;
			top: 50%;	//此处的50%指父元素高度的一半
			transform: translateY(-50%);  //此处的50%指自身高度的一半
		}
		.search {
			position: absolute;
			right: $uni-spacing-row-lg;
			top: 50%;
			transform: translateY(-50%);  //此处的50%指自身高度的一半
		}
	}
	navigator {
		color: $uni-text-color-inverse;
	}
}
</style>